<template>
	<view>
	<u-navbar :is-back="false" title="修改密码"
	  title-size="30"
	  :background="{background:'#2B88FE' }"
	  title-color="#fff">
	  <div class="head_icon">
	    <u-icon @click="$api.handleBackTo"
	      name="arrow-left" color="#fff"
	      size="36">
	    </u-icon>
	    <u-icon @click="$api.handleHomeTo"
	      name="home" color="#fff" size="36">
	    </u-icon>
	  </div>
	</u-navbar>	
		

  <div class="changePassword">
    <u-form :model="form" ref="uForm" label-width="150rpx">
      <u-form-item label="密码" prop="password">
        <u-input type="password" v-model="form.password" />
      </u-form-item>
      <u-form-item label="确认密码" prop="password2">
        <u-input type="password" v-model="form.password2" />
      </u-form-item>
      <u-form-item>
        <u-button type="primary" @click="saveChange">确认修改</u-button>
      </u-form-item>
    </u-form>
  </div>
	</view></template>

<script>
export default {
  data() {
    return {
      rules: {
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur,change',
          },
        ],
        password2: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur,change',
          },
          {
            validator: (rule, value, callback) => {
              return value === this.form.password
            },
            message: '密码不一致',
            trigger: 'blur,change',
          },
        ],
      },
      form: {
        password: '',
        password2: '',
      },
    }
  },
  methods: {
    saveChange() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.$axios('api/User/ChangePassWord', 'post', { value: this.form.password }).then((res) => {
            this.$api.handleBack('修改密码成功')
          })
        }
      })
    },
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
}
</script>

<style lang="scss" scoped>
.changePassword {
  padding: 20rpx;
}
</style>